import React, {useState, useRef, forwardRef, useImperativeHandle} from "react";
import {Button, Card} from 'antd';
import styles from './index.less'
import Login from "../../../Login";


const Dome1 = {
    Parent: () => {
        console.log('--------父组件渲染了')
        const [count, setCount] = useState(1)
        const countRef = useRef(1)

        return (
            <div>
                <table border={'1px'}>
                    <tbody>
                    <tr className={styles['header-tr']}>
                        <td></td>
                        <td>useState</td>
                        <td>useRef</td>
                    </tr>
                    <tr>
                        <td className={styles['td-fontweight']}>修改值时</td>
                        <td>触发重新渲染</td>
                        <td><span className={'definition'}>不</span>触发重新渲染</td>
                    </tr>
                    <tr>
                        <td className={styles['td-fontweight']}>组件重新渲染时</td>
                        <td>获取之前值</td>
                        <td>获取之前值</td>
                    </tr>
                    </tbody>

                </table>

                <div className={'definition'} style={{marginTop: 10}}>更新useRef 的值不会让页面重新渲染</div>
                <div>当前 useState 定义的 count 值为：{count}</div>
                <div>当前 useRef 定义的 countRef 值为：{countRef.current}</div>
                <Button onClick={() => countRef.current += 1}>点击更改 useRef 定义的数据</Button>
                <Button onClick={(() => setCount(count + 1))}>点击更改 useState 定义的数据</Button>

            </div>
        )
    }
}

const Dome2 = {
    Parent: () => {
        const domRef = useRef(null)
        const handelClick = () => {
            domRef.current.style.color = domRef.current.style.color === 'red' ? '#000' : 'red'
        }

        return (
            <div>
                <h3 ref={domRef}>我是组件</h3>
                <Button onClick={handelClick}>点击更改 文字颜色</Button>

            </div>
        )
    }
}
const Dome3 = {
    /**
     *  使用 forwardRef 包裹子组件  并且接收 ref
     * */
    Children: forwardRef((props, ref) => {
        const [count, setCount] = useState(1)
        /**
         *  使用 useImperativeHandle 暴露
         * */

        useImperativeHandle(ref, () => {
            return {setCount}
        })
        return (
            <div>
                <h3>我是子组件 当前count值为：{count}</h3>
            </div>
        )
    }),
    Parent: () => {
        const domRef = useRef(null)
        const handelClick = () => {
            domRef.current.setCount(pre => pre + 1)
            // domRef.current.style.color = domRef.current.style.color === 'red' ? '#000' : 'red'
        }

        return (
            <div>
                <h3 ref={domRef}>我是父组件</h3>
                <Button onClick={handelClick}>点击更改子组件的数据 </Button>
                <Dome3.Children ref={domRef}/>
            </div>
        )
    }
}

export default () => {

    return (
        <Card hoverable>
            <h1>useRef的使用:</h1>
            <ul>
                <li>记忆(缓存)功能 (与 useState 的区别)</li>
                <li>获取dome</li>
                <li>组件ref（获取子传父） 子组件 需要使用 <span className={'definition'}>forwardRef</span> 包裹； 子组件的方法和数据
                    需要使用 <span className={'definition'}>useImperativeHandle</span>
                    暴露 父组件才能拿到
                </li>
            </ul>

            <div className={'module'} style={{marginTop: 10}}>
                <Dome1.Parent/>
            </div>

            <div className={'module'} style={{marginTop: 10}}>
                <div>获取dom：</div>
                <Dome2.Parent/>
            </div>

            <div className={'module'} style={{marginTop: 10}}>
                <div>组件ref（子传父）：</div>
                <Dome3.Parent/>
            </div>
        </Card>
    )
}